<template>
<AddSmall ref="add_small_ref"/>
<el-dialog
	v-model="add_small_visible_test"
	:title=" '选择小类' "
  :width=" '80%' "
>

	<el-form ref="small_query_form" :label-position=" 'right' " label-width="80px"
					 :inline="true" style="width: 100%" @submit.prevent>

		<el-form-item label="大类搜索">
			<FuzzySearchBigVer2 @DataUse="big_auto_complete_in_small($event as any)"
											ref="big1_clear_ref"
											:disable="false"
											@DataClear="big1_clear"/>
		</el-form-item>

		<el-form-item prop="use" label="启用状态">
			<el-radio-group v-model="fuzzy_search.use">
				<el-radio-button label="启用">启用</el-radio-button>
				<el-radio-button label="未启用">未启用</el-radio-button>
				<el-radio-button label="全部">全部</el-radio-button>
			</el-radio-group>
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="return_small_list()">搜索</el-button>
			<el-button @click=" add_small() ">添加小类</el-button>
		</el-form-item>

	</el-form>

<el-table 
	:data="tableData" 
	border 
	style="width: 100%"
	@row-dblclick="select_small"
	stripe
>
	<el-table-column type="index" width="50" />
	<el-table-column prop="big_name" label="大类名称"/>
	<el-table-column prop="no" label="编号"/>
	<el-table-column prop="small_name" label="小类名称"/>
	<el-table-column prop="units" label="单位" />
	<el-table-column prop="model" label="型号" />
	<el-table-column prop="number" label="数量" />
</el-table>
<el-pagination
	v-model:current-page="currentPage"
	v-model:page-size="pageSize"
	:page-sizes="[100, 200, 500]"
	:small="small"
	:disabled="disabled"
	:background="background"
	layout="total, sizes, prev, pager, next, jumper"
	:total=" total "
/>
</el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref, watch} from "vue";
import {SmallFuzzyList} from "@/api/first/FuzzySearch/type.ts";
import {SmallTableCRUDResponse} from "@/api/first/PartsManagement/type.ts";
import AddSmall from "@/components/first/AddSmall.vue";
import type {BigAutoCompletion} from "@/components/first/FuzzySearchBigVer2.vue";
import {ElMessage, FormInstance} from "element-plus";
import {reqSmallList} from "@/api/first/PartsManagement";
import FuzzySearchBigVer2 from "@/components/first/FuzzySearchBigVer2.vue";

// 模糊搜索
//=====================================================================
const big1_clear = () => {
	fuzzy_search.big_id = ''
}
const big1_clear_ref = ref()  // 返回页面内容搜索 大类ref
// 设定返回小类条件的ref
const small_query_form = ref<FormInstance>()
// 返回小类数据
const fuzzy_search = reactive<{
	big_name: string
	big_prefix: string
	big_id: number | ''
	use: '启用' | '未启用' | '全部'
}>({
	big_name: '',
	big_prefix: '',
	big_id: '',
	use: '全部',
})
const big_auto_complete_in_small = (cmy: BigAutoCompletion) => {
	fuzzy_search.big_id = cmy.big_id as number
}

// 返回小类数据
const return_small_list = () => {
	if (fuzzy_search.big_id === '') {
		ElMessage.warning('请选择大类')
		return
	}
	// 根据大类id返回其下所有小类数据
	read_small()
}
// 数据返回函数
const read_small = () => {
	reqSmallList({
		mode: 'read',
		read: {
			mode: 'big',
			id: fuzzy_search.big_id as number,
			use: fuzzy_search.use,
			start: 0,
			stop: 1000000,   // 返回该大类下的全部小类，直接写一个比较大的数
		}
	}).then((res: SmallTableCRUDResponse) => {
		total_data = res.read?.small_list as any
		tableData = total_data.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
		total.value = res.read?.total as number
		ElMessage.success(res.success?.message)
	})
}


// 添加小类
const add_small_ref = ref()
const add_small = () => {
	add_small_ref.value?.open()
}

// 小类列表前端分页
const background = ref<boolean>(true)  // 是否带背景方框
const disabled = ref<boolean>(false)  // 是否可用
const small = ref<boolean>(false)  // 普通大小还是小一号
const currentPage = ref<number>(1)  // 当前所在页数
const pageSize = ref<number>(100)  // 一页有几条记录
const total = ref<number>(0) // 总条数
watch([currentPage, pageSize], () => {
	tableData = total_data.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
})

const select_small = (row: SmallFuzzyList) => {
	cmy('return_small', row)
	add_small_visible_test.value = false
}

const add_small_visible_test = ref(false)
let total_data: SmallFuzzyList[] = []
const open = (data: SmallFuzzyList[]) => {
	add_small_visible_test.value = true
	total_data = data
	tableData = total_data.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
	total.value = total_data.length
}

defineExpose({open});
const cmy = defineEmits(["return_small"]);

let tableData: SmallFuzzyList[] = []
</script>